<template>
  <view class="info-card">
    <!-- 有数据状态 -->
    <view v-if="!isEmpty" class="card has-data" :class="type">
      <view class="card-header">
        <view class="address">
          <u-icon name="map" size="28rpx" color="#333"></u-icon>
          <text>{{ data.allAddress || '未知地址' }}</text>
        </view>
        <!-- <view class="balance">
          <text class="label">余额</text>
          <text class="amount">{{ data.totalFee || '0.00' }}元</text>
          <view class="refresh">
            <u-icon name="reload" size="30" color="#333"></u-icon>
          </view>
        </view> -->
        
        <!-- <view class="date">截止{{ data.date || '未知日期' }}</view>
        <view class="pay-btn" :class="type">
          <text>去交费</text>
        </view> -->
      </view>
      
      <view class="card-fold" @click="fold = !fold">
        <text>{{ fold ? '展开' : '收起' }}详细信息：</text>
        <u-icon :name="fold ? 'arrow-down-fill' : 'arrow-up-fill'" size="12"></u-icon>
      </view>
      
      <view class="card-body" v-if="!fold">
        <u-grid :border="true" col="4">
          <u-grid-item>
            <view class="grid-item">
              <text class="label">设备类型</text>
              <text class="value">热表</text>
            </view>
          </u-grid-item>
          <u-grid-item>
            <view class="grid-item">
              <text class="label">当前热表数</text>
              <text class="value">{{ data.heatQuantity || '未知' }}</text>
            </view>
          </u-grid-item>
          <u-grid-item>
            <view class="grid-item">
              <text class="label">累计耗热量</text>
              <text class="value">{{ data.subHeatQuantity || '0' }}kWh</text>
            </view>
          </u-grid-item>
          <u-grid-item>
            <view class="grid-item">
              <text class="label">热费统计</text>
              <text class="value">{{ data.totalFee || '0.00' }}元</text>
            </view>
          </u-grid-item>
          <u-grid-item>
            <view class="grid-item">
              <text class="label">设备类型</text>
              <text class="value">智能阀</text>
            </view>
          </u-grid-item>
          <u-grid-item>
            <view class="grid-item">
              <text class="label">工作模式</text>
              <text class="value">{{ WORK_MODE_DICT[data.workMode] || '-' }}</text>
            </view>
          </u-grid-item>
          <u-grid-item>
            <view class="grid-item">
              <text class="label">室内温度</text>
              <text class="value">{{ data.tempIndoor || '-' }}</text>
            </view>
          </u-grid-item>
          <u-grid-item>
            <view class="grid-item">
              <text class="label">设定温度</text>
              <text class="value">{{ data.tempSet || '-' }}</text>
            </view>
          </u-grid-item>
        </u-grid>
      </view>
    </view>
    
    <!-- 空状态 -->
    <view v-else class="card no-data" :class="type">
      <view class="empty-tip">
        <u-icon name="info-circle" size="60rpx" color="#999"></u-icon>
        <text>暂无户号信息</text>
      </view>
      <view class="add-btn" :class="type" @click="goToBindBuilding">
        <text>添加户号</text>
      </view>
    </view>
  </view>
</template>

<script>
import { USER_TYPE } from '../type.js'
import { WORK_MODE_DICT } from '@/utils/dict.js'

export default {
  name: 'InfoCard',
  props: {
    type: {
      type: String,
      default: USER_TYPE.RESIDENT,
      validator: (value) => {
        return Object.values(USER_TYPE).includes(value)
      }
    },
    isEmpty: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      fold: true,
      WORK_MODE_DICT,
      USER_TYPE // 暴露给模板使用
    }
  },
  methods: {
    goToBindBuilding() {
      uni.navigateTo({
        url: '/pages/subPackageHome/bind-building/index'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/uni.scss';

.info-card {
  margin: 0 20rpx 20rpx;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
  
  .card {
    padding: 30rpx;
    
    // 根据类型设置背景色
    &.resident {
      background-color: #e0f8f8;
      .card-body {
        background-color: #fff;
      }
    }
    
    &.enterprise {
      background-color: #e6f4ff;
      .card-body {
        background-color: #f6f9ff;
      }
    }
    
    // 有数据状态
    &.has-data {
      .card-header {
        position: relative;
        
        .address {
          font-size: 28rpx;
          color: #333;
          font-weight: 500;
          margin-bottom: 20rpx;
          display: flex;
          align-items: center;
          gap: 10rpx;
        }
        
        .balance {
          font-size: 24rpx;
          color: #666;
          margin-bottom: 10rpx;
          display: flex;
          align-items: center;
          
          .amount {
            font-size: 48rpx;
            color: #333;
            font-weight: bold;
            margin-left: 20rpx;
          }
          
          .refresh {
            margin-left: 20rpx;
          }
        }
        
        .date {
          font-size: 24rpx;
          color: #999;
          margin-bottom: 20rpx;
        }
        
        .pay-btn {
          position: absolute;
          right: 10rpx;
          bottom: 5rpx;
          width: 180rpx;
          height: 60rpx;
          color: #FFF;
          font-size: 22rpx;
          border-radius: 12rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          
          &.resident {
            background-color: $resident-theme-color;
          }
          
          &.enterprise {
            background-color: $enterprise-theme-color;
          }
        }
      }
      
      .card-fold {
        margin: 20rpx 0;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        color: #666;
        font-weight: 400;
        
        text {
          font-size: 24rpx;
        }
      }
      
      .card-body {
        border-radius: 12rpx;
        padding: 20rpx;
        
        .grid-item {
          display: flex;
          flex-direction: column;
          align-items: center;
          padding: 10rpx;
          
          .label {
            font-size: 24rpx;
            color: #666;
            margin-bottom: 20rpx;
          }
          
          .value {
            font-size: 26rpx;
            color: #333;
            font-weight: 500;
          }
        }
      }
    }
    
    // 空状态
    &.no-data {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 40rpx 30rpx;
      
      .empty-tip {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 40rpx;
        
        text {
          margin-top: 20rpx;
          font-size: 28rpx;
          color: #999;
        }
      }
      
      .add-btn {
        width: 50%;
        height: 70rpx;
        color: #FFF;
        font-size: 28rpx;
        border-radius: 12rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        
        &.resident {
          background-color: $resident-theme-color;
        }
        
        &.enterprise {
          background-color: $enterprise-theme-color;
        }
      }
    }
  }
}
</style> 